<template>
  <div id="message">
    <view-box ref="viewBox">
      <!-- <h1>123123</h1> -->
      <x-header v-if='pageType!="baoming"' :left-options="{backText: ''}" style="color:white" title="use prop:title">
        <span slot="overwrite-title">报名信息</span>

        <a href="/#/" style="font-size:24px" slot="right">
          <i class="fa fa-home fa-fw"></i>
        </a>
      </x-header>
      <Myheader v-if='pageType=="baoming"' id='type_baoming' :page="page"></Myheader>
      <my-list v-for="(item,index) in this.listData" :index="index" :lists="item" :key="item.id">

      </my-list>

      <!-- <div style="position: fixed;
    width: 100%;
    bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;">
        <x-button link="/baoming" type='primary'>返回首页</x-button>
      </div> -->

      <div class="button_header" id='x-bottom'>
        <x-header slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="立即报名" @on-click-title='go("list")'>

          <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>

        </x-header>
        <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
      </div>

    </view-box>
    <myFooter v-if='pageType!="baoming"' style="position: fixed;
    bottom: 0;width:100vw"></myFooter>

  </div>
</template>


<script type="text/ecmascript-6">
//let host = "http://jiangtao.v3.ihuipao.com/";
/* eslint-disable*/
import Bus from "@/common/js/bus.js";
import MyList from "@/common/components/messagelist.vue";
import Myheader from "@/common/components/myheader.vue";
import myFooter from "@/common/components/myfooter.vue";
import mixin from "@/common/js/mixin.js";
import { CheckIcon, XButton, Group, Cell, ViewBox, XHeader, cookie } from "vux";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import { setTitle } from "@/common/js/main.js";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      listData: [],
      lists: {},
      showContent001: false,
      item003: false,
      more: this.$t("message.more"),
      less: this.$t("message.less"),
      raceid: "",
      idnum: "",
      eventid: "",
      pageType: ""
    };
  },
  beforeCreate() {
    setTitle("报名信息");
  },
  created() {
    Bus.$on("refresh", target => {
      location.reload();
    });

    let _this = this;
    this.pageType = window.localStorage.getItem("pageType");

    if (window.location.hostname.indexOf("en") == 0) {
      this.$i18n.locale = "EN";
    }

    window.localStorage.setItem("message", "old");

    // this.page.raceid = this.$route.query.race_id;

    this.idnum = cookie.get("idnum");
    this.eventid = this.$route.query.eventid || cookie.get("eventid");

    //query: {_key: this.userKey,eventid:this.list.event.id }

    // if (this.$route.query.dataType == "show") {
    //   this.idnum = this.$route.query.IdNumber;
    //   this.raceid = this.page.raceid;
    //   this.userApply();
    // } else if (this.$route.query.eventid) {
    //   indexedDB(
    //     "IDNumber",
    //     "get",
    //     this.RACEID,
    //     "",
    //     function(a) {
    //       this.idnum = a;
    //       this.eventid = this.$route.query.eventid;
    //       this.userApply1();
    //     }.bind(this)
    //   );
    // } else {
    //   this.raceid = this.page.raceid;
    //   this.idnum = window.localStorage.getItem("idnum");
    //   if (!this.idnum) {
    //     this.$vux.toast.show({
    //       type: "warn",
    //       text: _this.$t("index.bandfirst"),
    //       onHide() {
    //         //window.location.href = '//' + window.location.host + '/baoming/'+_this.page.raceid+'#/'
    //       }
    //     });
    //     return false;
    //   }
    //this.getinfo()
    this.userApply();

    // indexedDB('eventId', 'get', this.RACEID, '', function (a1) {
    //   if (a1) {
    //     this.eventid = a;
    //     this.userApply();
    //   } else {
    //     this.userApply();
    //   }
    // }

    // }
    //      if (this.$route.query.eventid) {
    //        this.eventid = this.$route.query.eventid
    //        this.userApply1();
    //      } else if (this.$route.query.eventid && this.$route.query.idnum) {
    //        this.eventid = this.$route.query.eventid
    //        this.idnum = this.$route.query.idnum
    //        this.userApply1();
    //      } else {
    //        this.userApply();
    //      }
    //}
  },
  methods: {
    go() {
      //_this.$router.push({ path: "user" });
      this.$router.push({ path: "list" });
    },
    userApply1() {
      this.axios
        .post(
          `${window.host}registration/fetch`,
          qs.stringify({
            //idnum: "341224198805216894",
            idnum: this.idnum,
            eventid: this.eventid
          })
        )
        .then(response => {
          //console.log(JSON.stringify(response))
          //var response ={"data":{"code":"200","msg":"success","data":[{"id":74144,"refundable":1,"_key":"5a4c7d9e56494","orderid":"5a4c7da4d147a","eventid":"5","bib":null,"idtype":"passport","state":"normal","wait_pos":0,"idnum":"32092220","name":"chen","enname":null,"birth":"1990-01-01","gender":"male","mobile":"+86-18912489053","email":"12@qq.com","blood":"B","cloth":"XL","emername":"chen","emertel":null,"national":"003","country":"001081","province":null,"city":null,"pay_at":"2018-01-03 14:54:19","refundid":0,"created_at":"2018-01-03 14:52:14","updated_at":"2018-01-03 14:54:19","deleted_at":null,"address":"ggf","emermobile":"+86-15261535024","text-1514473466789":"chen","file-1514473485996":["image/jpeg/4c9fb764ba6a286ea4f7cdf9bac28c87.png"],"_sid":"123","_lang":"en","payable":1}]},"status":200,"statusText":"OK","headers":{"content-type":"text/html; charset=UTF-8","cache-control":"no-cache, private"},"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/x-www-form-urlencoded"},"method":"post","url":"http://api.ihuipao.com/registration/fetch","data":"idnum=32092220&eventid=5&_sid=123&_lang=zh-cn"},"request":{}};
          if (response.data.code == "200") {
            this.listData = response.data.data;

            //mock

            //this.listData[0].editable=1

            if (this.listData.length == 0) {
              this.$vux.toast.show({
                type: "warn",
                text: this.$t("index.nofound"),
                onHide() {
                  //console.log(this.page);
                  window.location.href =
                    "//" +
                    window.location.host +
                    "/baoming/" +
                    _this.page.raceid +
                    "#/";
                }
              });
            }
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    getinfo() {
      //http://jiangtao.v3.ihuipao.com/user/auth/regitration
      this.axios
        .post(
          `${host}registration/fetch`,
          qs.stringify({
            idnum: this.idnum,
            eventid: this.eventid
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            console.log(response.data.data.idnum);
            window.localStorage.setItem("idnum", response.data.data.idnum);
            this.userApply();
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    userApply() {
      /*
      idnum=320203199102270913&raceid=11&_sid=7m6yrY3syG4h1QBOkAWwDM1tvjYwxvaRO8aW2ZnM&_lang=zh-cn&_channel=undefined
      idnum=320203199102270913&raceid=11&_sid=3V4iiRippHAzSIpOckbfHM7LgHTnfgPYMUaPQ3IU&_lang=zh-cn&_channel=huipao
      */
      //cookie.set("_sid", '3V4iiRippHAzSIpOckbfHM7LgHTnfgPYMUaPQ3IU');

      this.axios
        .post(
          `${host}registration/fetch`,
          qs.stringify({
            idnum: this.idnum,
            eventid: this.eventid
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.listData = response.data.data;
            console.log(this.listData);
            //mock

            this.listData[0].editable = 1;

            if (this.listData.length == 0) {
              this.$vux.toast.show({
                type: "warn",
                text: this.$t("index.nofound")
              });
            }
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    }
  },
  components: {
    XHeader,
    myFooter,
    MyList,
    Group,
    Cell,
    XButton,
    ViewBox,
    Myheader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
#message .slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
}

#message p {
  color: #999;
}

#message .animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}

#message .list-box {
  height: 90px;
  overflow: hidden;
  border-top: 1px solid #d9d9d9;
  // border-bottom:1px solid #D9D9D9;
}

#message .refundBtn {
  float: right;
  margin: 10px 15px;
}

#message .more-btn {
  color: #1aad19;
  background-color: #fff;
}

#message + div .ad {
  display: block;
}

#message .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}
#message #type_baoming {
  img {
    max-width: 100%;
  }
}
</style>






